<template>
  <div class="goods-detail">
    <div class="banxin">
      <Breadcrumb :arr="nav"></Breadcrumb>
      <div class="info banxin flex">
        <div class="left">
          <ProDetail v-if="proInfo.id" :proInfo="proInfo"></ProDetail>
        </div>
        <div class="right">
          <DuiHuan :themYouCanBuy="themYouCanBuy"></DuiHuan>
        </div>
      </div>
      <div class="detail">
        <ul class="tab flex">
          <li @click="currentTab = 0" :class="{ active: currentTab === 0 }">
            商品详情
          </li>
          <li @click="currentTab = 1" :class="{ active: currentTab === 1 }">
            常见问题
          </li>
        </ul>
        <div
          v-show="currentTab === 0"
          class="info-detail"
          v-html="proInfo.description"
        ></div>
        <div v-show="currentTab === 1" class="problem">
          <h4>兑换后运费如何收取？</h4>

          <p>
            商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
          </p>

          <p>
            （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
          </p>

          <h4>如何申请退换货？</h4>
          <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
          <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
          <p>
            因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；
          </p>
          <p>
            如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；
          </p>
          <p>
            如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。
          </p>

          <h4>如何开具发票？</h4>
          <p>
            叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。
          </p>

          <h4>关于鸡腿价格问题</h4>
          <p>
            因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。
          </p>
          <h4>联系我们</h4>
          <p>www.wolfcode.cn</p>
          <p>微信公众号搜索“叩丁狼”</p>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import DuiHuan from "../components/detail/DuiHuan.vue";
import ProDetail from "../components/detail/ProDetail.vue";
import Breadcrumb from "../components/common/Breadcrumb.vue";
import { GoodsDetail } from "../http/api";
export default {
  data() {
    return {
      nav: [],
      proInfo: {},
      currentTab: 0,
      themYouCanBuy: [],
    };
  },
  components: {
    Breadcrumb,
    ProDetail,
    DuiHuan,
  },
  created() {
    this.getDetail();
  },
  methods: {
    async getDetail() {
      if (!this.$route.query.id) return;
      const { data } = await GoodsDetail(this.$route.query.id);
      console.log(data);
      //   this.nav=data.nav.map(el=>{
      //       return {
      //           path:el.link,
      //           text:el.name
      //       }
      //   })
      //   this.nav[this.nav.length-1].isLast=true;
      this.proInfo = data.productInfo;
      console.log(data.productInfo);
      const reg = /upload\//g;
      this.proInfo.description = data.productInfo.description.replace(
        reg,
        "http://sc.wolfcode.cn/upload/"
      );
      // this.proInfo.imgAltas = data.productInfo.imgAltas.map((el) => {
      //   el.src = "http://sc.wolfcode.cn/" + el.src;
      //   return el;
      // });
      this.proInfo.imgAltas = data.productInfo.imgAltas;

      this.proInfo.parameters = data.productInfo.parameterJson[0].parameters;
      // console.log(this.proInfo.parameters);

      this.themYouCanBuy = data.themYouCanBuy;
      // this.themYouCanBuy = data.themYouCanBuy.map((el) => {
      //   el.img = "http://sc.wolfcode.cn/" + el.img;
      //   return el;
      // });
      // console.log(this.themYouCanBuy);
    },
  },
  watch: {
    "$route.query": {
      handler() {
        this.getDetail();
      },
      deep: true,
    },
  },
};
</script>
 
<style lang = "less" scoped>
.banxin {
  padding-bottom: 30px;
}
.detail {
  border-top: 1px solid #ececec;
  li {
    cursor: pointer;
    padding: 16px;
    font-size: 18px;
    &.active {
      background-color: #f1f1f1;
    }
  }
  .info-detail,
  .problem {
    margin-top: 30px;
    line-height: 36px;
    h4 {
      font-weight: bold;
      margin-top: 30px;
    }
    p {
      font-size: 14px;
    }
  }
}
</style>